import G6 from "@antv/g6";

import { formatUnit } from "@/utils/format";

export const podNameTooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 10,
  itemTypes: ["node", "combo"],
  getContent: (e) => {
    const targetName = e.target.get("name");
    const node = e.item.getModel();
    if (targetName === "node-name") {
      return node.podName;
    }
    return "";
  },
  shouldBegin: (e) => {
    const targetName = e.target.get("name");
    if (targetName === "node-name") {
      return true;
    }
    return false;
  },
});

export const podEdgeTooltip = new G6.Tooltip({
  offsetX: 20,
  offsetY: 20,
  itemTypes: ["edge"],
  getContent: (e) => {
    const edge = e.item.getModel();
    return `<div class='edge_tooltip_warp'>
            <div class='mb6'>
                <div class='metric_name'>响应时间：</div>
                <div>
                    <span class='metric_value mr6'>${formatUnit(
                      edge.responseTime,
                      "ns"
                    )}</span>
                    <span>同比 ${formatUnit(
                      edge.responseTimeDodRate,
                      "dr"
                    )}</span>
                    ${
                      edge.responseTimeDodRate
                        ? `<span class='dr_${
                            edge.responseTimeDodRate > 0 ? "up" : "down"
                          }_icon'></span>`
                        : ""
                    }
                    <span style='margin-left: 4px'>环比 ${formatUnit(
                      edge.responseTimeRingRate,
                      "dr"
                    )}</span>
                    ${
                      edge.responseTimeRingRate
                        ? `<span class='dr_${
                            edge.responseTimeRingRate > 0 ? "up" : "down"
                          }_icon'></span>`
                        : ""
                    }
                </div>
            </div>
            <div class='mb6'>
                <div class='metric_name'>请求量：</div>
                <div>
                    <span class='metric_value mr6'>${formatUnit(
                      edge.requestTotal,
                      "count"
                    )}</span>
                    <span>同比 ${formatUnit(
                      edge.requestTotalDodRate,
                      "dr"
                    )}</span>
                    ${
                      edge.requestTotalDodRate
                        ? `<span class='dr_${
                            edge.requestTotalDodRate > 0 ? "up" : "down"
                          }_icon'></span>`
                        : ""
                    }
                    <span style='margin-left: 4px'>环比 ${formatUnit(
                      edge.requestTotalRingRate,
                      "dr"
                    )}</span>
                    ${
                      edge.requestTotalRingRate
                        ? `<span class='dr_${
                            edge.requestTotalRingRate > 0 ? "up" : "down"
                          }_icon'></span>`
                        : ""
                    }
                </div>
            </div>
            <div>
                <div class='metric_name'>错误率：</div>
                <div>
                    <span class='metric_value mr6'>${formatUnit(
                      edge.errorRate,
                      "%"
                    )}</span>
                    <span>同比 ${formatUnit(edge.errorRateDodRate, "dr")}</span>
                    ${
                      edge.errorRateDodRate
                        ? `<span class='dr_${
                            edge.errorRateDodRate > 0 ? "up" : "down"
                          }_icon'></span>`
                        : ""
                    }
                    <span style='margin-left: 4px'>环比 ${formatUnit(
                      edge.errorRateRingRate,
                      "dr"
                    )}</span>
                    ${
                      edge.errorRateRingRate
                        ? `<span class='dr_${
                            edge.errorRateRingRate > 0 ? "up" : "down"
                          }_icon'></span>`
                        : ""
                    }
                </div>
            </div>
        </div>`;
  },
});
